<template>
	<view class="signa">
		<view class="btn">
			<view class="cancel-btn" @click="clear">
				重写
			</view>
			<view class="save-btn" @click="save">
				确定
			</view>
		</view>
		<canvas class="canvas" disable-scroll="true" :style="{'width':width,'height':height}" canvas-id="designature" @touchstart="starts"
		 @touchmove="moves" @touchend="end"></canvas>
	</view>
</template>

<script>
	
	import { formatDate } from '../../../utils/formatDate.js'
	
	export default{
		name:'Signature',
		data () {
			return {
				resultUrl: '',
				dom: null,
				line: [],
				width: '0px',
				height: '0px',
				radius: 0,
				dataList: [],
				writer: '', // 甲方为1， 乙方为0
				agreeInfo: {}
			}
		},
		created () {
			uni.getSystemInfo({
				success: (res) => {
					this.width = res.windowWidth - 50 + 'px';
					this.height = res.windowHeight - 15 + 'px';
				}
			});
			this.dom = uni.createCanvasContext('designature', this);
		},
		methods:{
			end (e) {},
			distance (a, b) {
				let x = b.x - a.x;
				let y = b.y - a.y;
				return Math.sqrt(x * x + y * y);
			},
			starts (e) {
				this.line.push({
					points: [{
						time: new Date().getTime(),
						x: e.touches[0].x,
						y: e.touches[0].y,
						dis: 0
					}]
				})
				let currentPoint = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.currentPoint = currentPoint
				this.drawer(this.line[this.line.length - 1])
			},
			moves (e) {
				console.log(e)
				this.dataList.push(e.mp.timeStamp)
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.lastPoint = this.currentPoint,
					this.currentPoint = point
				this.line[this.line.length - 1].points.push({
					time: new Date().getTime(),
					x: e.touches[0].x,
					y: e.touches[0].y,
					dis: this.distance(this.currentPoint, this.lastPoint)
				})
				this.drawer(this.line[this.line.length - 1])
			},
			drawer (item) {
				let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5,
					x, y;
				var time = 0;
				if (item.points.length > 2) {
					let lines = item.points[item.points.length - 3];
					let line = item.points[item.points.length - 2];
					let end = item.points[item.points.length - 1];
					x = line.x;
					y = line.y;
					x1 = lines.x;
					y1 = lines.y;
					x2 = end.x;
					y2 = end.y;
					var dis = 0;
					time = (line.time - lines.time) + (end.time - line.time)
					dis = line.dis + lines.dis + end.dis;
					var dom = this.dom;
					var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax);
					cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t))
					cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t))
					dom.setLineCap('round')
					dom.beginPath();
					dom.setStrokeStyle('black')
					dom.setLineWidth(5)
					dom.moveTo(x1, y1);
					dom.quadraticCurveTo(cx, cy, x2, y2);
					
					dom.stroke();
					dom.draw(true)
				}

			},
			clear () {
				this.dataList = []
				this.dom.clearRect(0, 0, 1000, 1000)
				this.dom.draw()
			},
			save () {
				let _this = this;
				if(_this.dataList.length != 0){
					uni.showLoading({
					    title: '正在加载中',
						mask: true
					});
					uni.canvasToTempFilePath({
					canvasId: 'designature',
					fileType: 'jpg',
					quality: 1, //图片质量
					success:function(res) {
						console.log(res.tempFilePath)
						uni.uploadFile({
							url: _this.commonApi.petAvatar,
							filePath: res.tempFilePath,
							header:{
								token:uni.getStorageSync('token')
							},
							name: 'file',
							formData: {
								fileName: res.tempFilePath
							},
							success: (res) => {
								let img = JSON.parse(res.data)
								let date = new Date()
								if (_this.writer === 1) {
									_this.agreeInfo.firstSignUrl = img.data
									_this.agreeInfo.firstSignTime = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
								} else {
									_this.agreeInfo.secondSignUrl = img.data
									_this.agreeInfo.secondSignTime = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
								}
								_this.$store.commit('setAgreeInfo', _this.agreeInfo)
								uni.navigateTo({
								    url: '../agreementThree/agreementThree'
								});
								uni.hideLoading();
 							}
						})
					}
					},this)
				}else{
					uni.showToast({
						title: '签名不能为空',
						icon: 'none'
					});
				}
			}
		},
		mounted() {
			this.agreeInfo = this.$store.getters.getAgreeInfo
			this.writer = this.agreeInfo.writer
			console.log(this.agreeInfo, this.writer)
		}
	}
</script>

<style lang="scss" scoped>
	.signa {
		position: relative;
		overflow: hidden;
		background-color: #fbfbfb;
		height: 100vh;
		width: 100vw;
		.canvas {
			background-color: #FFFFFF;
			position: absolute;
			z-index: 9999;
			left: 45px;
			border: 1px solid #d6d6d6;
		}
		.btn {
			height: 100vh;
			position: fixed;
			background-color: #007AFF;
			font-size: 32rpx;
			.cancel-btn {
				width: 42vh;
				position: fixed;
				left: 50rpx;
				border: 1rpx solid #a9a1a1;
				transform: rotate(90deg);
				color: #666;
				margin-left: -21vh;
				margin-top: 21vh;
				height: 65rpx;
				line-height: 65rpx;
				border-radius: 17px;
				text-align: center;
				justify-content: center;
			}

			.save-btn {
				position: absolute;
				z-index: 999;
				display: inline-flex;
				margin-top: 72vh;
				margin-left: -21vh;
				transform: rotate(90deg);
				background: #FF9A00;
				width: 42vh;
				left: 50rpx;
				border-radius: 17px;
				border: 1rpx solid #FF9A00;
				color: #fff;
				height: 65rpx;
				line-height: 65rpx;
				text-align: center;
				justify-content: center;
			}
		}
	}
</style>
